<template>
    <div class="content">
      <el-form :inline="true" style="margin-left: 80px;">
        <el-form-item label="用户名称">
          <el-input v-model="form.username" placeholder="请输入用户名称" clearable style="width: 150px;"/>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="form.nickname" placeholder="请输入用户昵称" clearable style="width: 150px;"/>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱" clearable />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" placeholder="请输入电话" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="状态" clearable style="width: 100px;">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" class="queryBtn" @click="queryUsers">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 90%; margin: 0 auto; height: 305px;"
        border
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        highlight-current-row
        :row-class-name="rowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用户名" width="200"/>
        <el-table-column prop="nickname" label="用户昵称" width="150"/>
        <el-table-column prop="gender" label="性别" width="150" :formatter="formatGender"/>
        <el-table-column prop="avatar" label="头像" width="150"/>
        <el-table-column prop="email" label="邮箱" width="200"/>
        <el-table-column prop="phone" label="电话" min-width="200"/>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" icon="Edit" class="operate-btn" plain @click="edit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" icon="Delete" class="operate-btn" plain @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="form.currentPage"
        v-model:page-size="form.pageSize"
        :page-sizes="[1, 3, 5, 10]"
        :disabled="false"
        background
        layout="sizes, prev, pager, next, jumper, total"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 30px; align-self: center"
      />

      <Drawer v-if="drawerStore.userDrawer === true"></Drawer>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Drawer from '@/views/Admin/users/components/index.vue';
import { useDrawerStore } from '@/stores/drawer';
import { ElMessage, ElMessageBox } from 'element-plus'
import { fetchUsers } from '@/apis/admin/user';

const drawerStore = useDrawerStore()
const form = ref({
  currentPage: 1,
  pageSize: 5,
  username: '',
  nickname: '',
  email: '',
  phone: '',
  status: '1'
})

const tableData = ref([])

const headerCellStyle = {
  'background-color': 'rgb(61, 141, 253)',
  'color': 'white',
  'font-weight': 'bold',
  'text-align': 'center',
  'font-size': '17px',
  'height': '65px',
  'border': 'none'
}

const rowStyle = {
  'height': '60px'
}

const cellStyle = {
  'text-align': 'center',
  'vertical-align': 'middle'
}

const rowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
}

const formatGender = (row: any) => {
  const genderValue = row.gender;
  return genderValue === 0 ? '男' : '女';
};

function queryUsers(){
  fetchUsers(form.value).then((res) => {
    console.log('用户列表', res)
    tableData.value = res.data.records
  })
}

const handleSizeChange = (val: number) => {
  form.value.pageSize = val;
}

const handleCurrentChange = (val: number) => {
  form.value.currentPage = val;
}

function edit(row: any){
  drawerStore.userRow = row;
  console.log('articleRow',drawerStore.userRow)
  drawerStore.userDrawer = true
}

function deleteRow(row: any){
  console.log('删除的文章', row)
  ElMessageBox.alert('确定删除该用户吗？', '提示',{
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning',
    callback: () => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    },
  })
}

onMounted(() => {
  queryUsers();
});
</script>

<style scoped>
.queryBtn{
  margin-left: 75px;
}
</style>
